<template>
  <div class="headerIndex" :style="{background:headcolor}">
    <div class="header_left">
    <div class="header_icon" @click="isCollapse">
    <i :class="isshowMenu?'el-icon-s-unfold':'el-icon-s-fold'"></i>
    </div>
    <div class="header_title">前端老李头</div>
    </div>
    <div class="header_right">
       <!-- 退出 -->
       <el-row class="block-col-2">
  <el-col>
    <el-dropdown class="elDropdown">
      <div class="header_rightUser">
       <div class="userImg">
           <img src="../../assets/user.jpg" alt="">
           </div>
        <div class="text">前端老李头</div>
        </div>
      <el-dropdown-menu slot="dropdown" :style="{background:headcolor}">
        <el-dropdown-item  @click.native="logOut">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-col>
</el-row>
       <el-color-picker
       class="el-icon-s-tools"
       v-model="headcolor"
       :predefine="predefineColors">
      </el-color-picker>
       <el-color-picker
       class="el-color-picker_adjust"
       v-model="headcolor"
       :predefine="predefineColors">
      </el-color-picker>
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus/eventBus'
export default {
  data() {
    return {
        isshowMenu:false,//给左侧菜单传的值
         headcolor: 'rgba(0, 166, 90)',
        predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
        ]
    }
  },
  methods:{
    // 通过头部点击事件改变左侧菜单伸缩
    isCollapse(){
        eventBus.$emit('isShowCollapse',this.isshowMenu = !this.isshowMenu)
    },
    // 退出登录
    logOut(){
      console.log('清空', '')
      window.sessionStorage.clear();
      this.$router.push('/')
    }
  }
}
</script>
<style lang="less" scoped>
.headerIndex{
     height: 100%;
     color: #fff;
     display: flex;
     justify-content: space-between;
     align-items: center;
       font-size: 22px;
       .header_left{
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
  .header_icon{
    width: 48px;
    padding: 10px 7px;
    text-align: center;
    border-right: 1px solid #009b50;
  }
  .header_title{
    font-weight: 600;
    font-size: 20px;
    padding-left: 50px;
  }
}
.header_right{
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
     }
     .el-icon-s-tools{
      padding: 0 20px 0 25px;
     }
     .header_rightUser{
       color: #fff;
       display: flex;
       align-items: center;
     }
     .el-icon-s-tools:before{
       position: absolute;
    right: 19px;
    top: 2px;
    z-index: 1;
     }
     /deep/.el-color-picker__trigger{
       width: 28px;
       height: 28px;
       border: none;
       .el-color-picker__color{
         border: none;
       }
       .el-icon-arrow-down:before{
         content:""
       }
     }
     .el-color-picker{
        height: 30px;
     }
     .el-color-picker_adjust{
       position: absolute;
       right: 12px;
       z-index: 2;
       opacity: 0;
     }
     .el-menu-item-group>ul{
       background: #2c3b42;
     }
   }
</style>
